<!doctype html>
<html class="no-js">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>添加员工</title>
	<meta name="description" content="员工管理">
	<meta name="keywords" content="index">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="icon" type="image/png" href="/favicon.ico">
	<meta name="apple-mobile-web-app-title" content="骏怡连锁" />
	<link rel="stylesheet" href="/assets/css/amazeui.min.css" />
	<link rel="stylesheet" href="/assets/css/admin.css">
	<script src="/assets/js/jquery.min.js"></script>
	<script src="/assets/js/app.js"></script>
	<!-- Sweet Alert-->
	<link rel="stylesheet" href="/assets/css/sweetalert2.min.css">
	<style>
		body,
		html {
			margin: 0;
			padding: 0;
			/* height: 100%; */
			width: 100%;
			background: url(/assets/img/login.jpg)no-repeat;
			background-size: cover;
			/* perspective: 800px; */
		}

		.pop {
			/* transform: translateZ(10); */
			width: 600px;
			height: 400px;
			border: solid 1px rgb(231, 217, 217);
			border-radius: 5px;
			margin: 0 auto;
			background: rgb(231, 217, 217);
			margin-top: 50px;
			box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);

		}

		.box {
			height: 370px;
			width: 550px;
			border-radius: 5px;
			margin: 0 auto;
			margin-top: 15px;
			background: rgb(231, 217, 217);
		}

		.photo-box {
			height: 100%;
			width: 235px;
			background: rgb(247, 238, 238);
			margin-right: 10px;
			display: inline-block;
		}

		.photo {
			width: 150px;
			height: 200px;
			background: #fff;
			margin: 0 auto;
			margin-top: 30px;
			position: relative;
		}

		figcaption {
			width: 150px;
			height: 200px;
			line-height: 200px;
			position: absolute;
			top: 0;
			text-align: center;
			color: #ccc;
		}

		#my_file {
			font-size: 14px;
			margin-top: 57px;
			margin-left: 40px;
		}

		.message {
			height: 100%;
			width: 300px;
			background: rgb(247, 238, 238);
			display: inline-block;
			vertical-align: top;
			padding: 30px 20px;
			box-sizing: border-box;
		}

		input {
			margin: 5px 0;
		}

		select {
			width: 168px;
			height: 27px;
			margin: 5px 0;
		}

		label {
			display: inline-block;
			width: 55px;
		}

		.btn {
			margin: 0 auto;
			margin-top: 40px;
			width: 200px;

		}

		button {
			font-size: 15px;
			padding: 5px 20px;
			border: none;
		}

		#cel_btn {
			margin-left: 20px;
		}
	</style>
</head>

<body>
	<!--[if lte IE 9]><p class="browsehappy">升级你的浏览器吧！ <a href="http://se.360.cn/" target="_blank">升级浏览器</a>以获得更好的体验！</p><![endif]-->
	</head>

	<body>
		<header class="am-topbar admin-header">
			<div class="am-topbar-brand">
				<img src="../favicon.ico" />&nbsp;
				<span style="font-weight: bold;">骏怡连锁</span>
			</div>


		</header>

		<div class="am-cf admin-main">

			<div class="nav-navicon admin-main admin-sidebar">
				<div class="sideMenu am-icon-dashboard" style="color:#aeb2b7; margin: 10px 0 0 0;"> 欢迎系统管理员：
					<span id="currentUser"></span>
				</div>
				<div class="sideMenu">
					<h3 class="am-icon-volume-up">
						<em></em>
						<a href="/pages/index.html">首页</a>
					</h3>
					<h3 class="am-icon-flag">
						<em></em>
						<a href="/pages/room.html">客房管理</a>
					</h3>
					<h3 class="am-icon-cart-plus">
						<em></em>
						<a href="/pages/role.html"> 角色管理</a>
					</h3>
					<h3 class="am-icon-users">
						<em></em>
						<a href="/pages/employee.html">员工管理</a>
					</h3>
					<h3 class="am-icon-gears on">
						<em></em>
						<a href="/pages/user.html">用户管理</a>
					</h3>
				</div>
				<!-- sideMenu End -->

				<script type="text/javascript">
					jQuery(".sideMenu").slide({
						titCell: "h3", //鼠标触发对象
						targetCell: "ul", //与titCell一一对应，第n个titCell控制第n个targetCell的显示隐藏
						effect: "slideDown", //targetCell下拉效果
						delayTime: 300, //效果时间
						triggerTime: 150, //鼠标延迟触发时间（默认150）
						defaultPlay: true,//默认是否执行效果（默认true）
						returnDefault: true //鼠标从.sideMen移走后返回默认状态（默认false）
					});
				</script>

			</div>

			<div class=" admin-content">

				<div class="daohang">
					<div class="am-u-sm-2">
						<button type="button" class="am-btn am-btn-default am-radius am-btn-xs"> 首页</div>
					<div class="am-u-sm-6"></div>
					<div class="am-u-sm-4">
						<button type="button" class="am-btn am-btn-default am-radius am-btn-xs" id="logout"> 退出登录</div>
				</div>

				<div class="admin">

					<!-- <table style="text-align: center;" class="am-table am-table-bordered am-table-striped am-table-compact"> -->
					<!-- <h2 align='center'>添加员工</h2> -->

					<h2 align='center' id="my_title"></h2>
					<div class="pop">
						<div class="box">
							<div class="photo-box">
								<figure id="my_box" class="photo">
									<img src="" id="my_photo" style="width: 100%">
									<figcaption>请将图片拖入</figcaption>
								</figure>
								<input type="file" id="my_file">
							</div>
							<div class="message">
								<label for="name"> 姓名:</label>
								<input type="text" id="name">
								<br>
								<label> 性别:</label>
								<label>
									<input type="radio" name="sex" value="男" checked>男</label>
								<label>
									<input type="radio" name="sex" value="女"> 女</label>

								<br>
								<label for="age"> 年龄:</label>
								<input type="number" id="age">
								<br>
								<label for="phone"> 电话:</label>
								<input type="number" id="phone">
								<br>
								<label for="role"> 角色:</label>
								<select name="role" id="role_select"></select>
								<br>
								<label for="idCard"> 身份证:</label>
								<input type="text" id="idCard">
								<div class="btn">
									<button id="alter_btn">添加</button>
									<button id="cel_btn">取消</button>
								</div>


							</div>
						</div>
					</div>

				</div>

			</div>
		</div>

		<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="../assets/js/polyfill/rem.min.js"></script>
<script src="../assets/js/polyfill/respond.min.js"></script>
<script src="../assets/js/amazeui.legacy.js"></script>
<![endif]-->

		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="/assets/js/amazeui.min.js"></script>
		<!--<![endif]-->
		<!-- Sweet Alert -->
		<script src="/assets/js/sweetalert2.min.js"></script>
	</body>
	<script src="/assets/script/public.js"></script>
	<script src="/assets/script/alter_empls.js"></script>

</html>